<template>
	<div>
		<Row>
			<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
			<Input class="w-100" v-model="searchKey" placeholder="请输入会员姓名" />
			</Col>
		</Row>
		<Row>
			<div class="w-100 d-flex justify-content-end align-items-center ">
				<Button class="m-1" type="primary" shape="circle" @click="searchs" icon="ios-search">查询</Button>
			</div>
		</Row>
		<div v-if="this.tableInfo.data.length == 0" class="d-flex justify-content-center p-1">
			暂无数据
		</div>
		<div v-else>
		<div class="mt-1">
			<Row>
				<Col class="p-1" v-for="(row, index) in tableInfo.data" :xs="24" :sm="24" :md="12" :lg="8" :xl="6"
					:xxl="6">
				<div :style="'background-image:url('+row.cover+'); background-size: 100% 100%;'"
				 class="text-xss rounded shadow overflow-hidden">
					<div class="p-2 text-fuguang bg-black-80  d-flex justify-content-start">
						<span>{{row.hyjlid}}</span>
					</div>
					<div class="p-2 bg-black-50 text-fuguang d-flex text-xl justify-content-end">
						<span>{{row.hlname}}</span>
					</div>
					
					<div class="p-2 bg-black-50 position-relative d-flex justify-content-between align-items-center">
					    <!-- 左侧内容 -->
					    <div class="w-45  position-relative d-flex flex-column align-items-center">
					    	<div class="padding-top-10"></div>
					    	<div class="position-absolute rounded-circle overflow-hidden"
								style="width: 50px; height: 50px;">
					    		<img class="w-100 h-100" :src="row.headimg"/>
					    	</div>
					    	<div style="margin-top: 50px;" class="text-danhong  text-center iconfont icon-jubaohuitubiao-">{{row.nc}}</div>
					    </div>
					    <!-- 中间占位 -->
						<div style="display: flex; flex-direction: column; margin-left: 0px;">
					    <div class="w-10  text-fuguang iconfont icon-nianling" style="margin-top: 0px;">{{row.cd}}</div>
						<div style="margin-left: 40px;" class="text-fuguang">~</div>
						<div class="w-10 text-fuguang iconfont icon-nianling" style="margin-top: 0px;">{{row.ed}}</div>
						</div>
					    <!-- 右侧内容 -->
					   <div class="w-45  position-relative d-flex flex-column align-items-center">
					   	<div class="padding-top-10"></div>
					   	<div class="position-relative rounded-circle overflow-hidden"
							style="width: 50px; height: 50px;">
					   		<img class="w-100 h-100" :src="row.cover"/>
					   	</div>
					   	<div class="text-danhong text-center iconfont icon-jianshenfang">{{row.jlname}}</div>
					   </div>
					</div>

					<div class="p-1 bg-black-50 d-flex justify-content-end">
						<Button class=" ml-2 " type="primary" size="small" @click="show(row.hyjlid)">详细</Button>

					</div>
				</div>
				</Col>
			</Row>
		</div>
		</div>
			<div>
				<Page class="text-right mt-3" :page-size="tableInfo.pageSize" @on-change="pageSearch"
					:total="tableInfo.total" />
			</div>
		</div>
	</template>

	<script>
		export default {
			data() {
				return {
					searchKey:"",
					tableInfo: {
						currentPage: 1,
						pageSize: 10,
						total: 0,
						data: []
					},
					testtext:"前后端联通"
				}
			},
			methods: {
				init: function() {
					this.tableInfo.currentPage = 0;
					this.search();
				},
				newUser: function() {
					this.$router.push({
						path: "/hy/new"
					})
				},
				show: function(hyjlid) {
					console.log('跳转前 hyjlid 的值:', hyjlid);
					this.$router.push({
						path: "/hy/detail?id=" + hyjlid
					})
				},
				remove: function(hyjlid) {
					this.message.confirm({
						title: "删除提示",
						content: "即将删除场馆，确定吗？",
						onOk: () => {
							this.http.delete({
								url: "/client/info",
								param: {
									hyjlid
								}
							}).then(data => {
								this.search();
							});
						},
						onCancel: () => {
							this.message.info('操作已取消');
						}
					});
				},
				searchs: function() {
					this.tableInfo.currentPage = 1;
					this.search();
				},
				search: function() {
					this.http.get({
						url: "/client/hyjl/page",
						param: {
							// 传一个当前页
							current: this.tableInfo.currentPage,
							size: this.tableInfo.pageSize,
							searchKey: this.searchKey,
							testtext: this.testtext
							
						}
					}).then(res => {
						this.tableInfo.data = res.records;
						this.tableInfo.currentPage = res.current;
						this.tableInfo.total = res.total;
						this.tableInfo.pageSize = res.size;
					});
				},
				pageSearch: function(changedPage) {
					this.tableInfo.currentPage = changedPage;
					this.search();
				}
			},
			created: function() {
				this.init();
			}
		}
	</script>

<style>

</style>